<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<title>UI_demo</title>
	<style type="text/css">
	html,body{
		background:#eee;
		margin:0px;
		padding:0px;
		position: relative;
		height: 100%;
		overflow: hidden;
		font-family:"Microsoft Yahei";
	}
	a{
		text-decoration:none;
	}
	#wrapper{
		position: relative;
		top:0px;
		left:0px;
		width: 100%;
		height: 100%;
		overflow: scroll;
	}
<!--	<style type="text/css">
	html,body{
		background:#eee;
		margin:0px;
		padding:0px;
		font-family:"Microsoft Yahei";
	}
	a{
		text-decoration:none;
	}
	#wrapper{
		position: relative;
		top:0px;
		left:0px;
		width: 100%;
	}
	
	-->
	#loading_mask{
		position: absolute;
		top:0px;
		left:0px;
		width: 100%;
		height: 100%;
		background: #333;
	}
	.loading_mask_txt{
		position: absolute;
		top:50%;
		left:0px;
		width: 100%;
		height: 40px;
		margin-top: -20px;
		text-align: center;
		letter-spacing: 5px;
		color: #ccc;
		font-size: 24px;
	}
	.cpt {
		padding: 50px 0px 20px;
		margin-bottom: 30px;
		text-align: center;
		background: #333;
		border-bottom: 1px solid #fff;
		box-shadow:0px 0px 20px #fff;
	}
	.cpt h1{
		margin:0px;
		font-weight:normal;
		font-size: 28px;
		letter-spacing: 5px;
		color:#fff;
	}
	.cpt p{font-size:14px;color:#666;}
	.cpt b{
		padding: 0px 5px;
		font-size:18px;
		color:#eee;
		font-weight:normal;
	}
	.cpt i{
		color:#ccc;
		padding:0px 5px;
	}
	
	.cnt{max-width:460px;margin:auto;padding-bottom:200px;}
	.demoItem{
		margin: 0px 10px 20px;
		background: #fff;
		border-radius:4px;
		overflow: hidden;
		box-shadow: 1px 1px 3px rgba(0,0,0,0.7)
	}
	.demoItem h3{
		line-height:30px;
		margin:0px;
		padding: 5px 0px;
		text-align: center;
		color: #eee;
		font-size: 17px;
		font-weight: normal;
		background: #444;
	}
	.btnList{
		width: 100%;
		overflow: hidden;
	}
	.btnList a{
		display: block;
		height: 40px;
		line-height: 40px;
		text-align:center;
		border-top: 1px solid #ddd;
		margin-top: -1px;
		color: #666;
		font-size: 14px;
		transition: 0.3s;
	}
	.btnList a:hover{
		background: #f4f4f4;
		color: #222;
	}
	.btnList a:active{
		background: #ccc;
		color: #222;
	}
	
	
	/****/
	.btnConf{
		padding: 10px 5px;
		text-align: center;
		background: #fff;
	}
	.btnConf a{
		display: inline-block;
		font-size: 14px;
		color : #aaa;
		margin-right: 10px;
		padding: 0px 10px;
		line-height: 24px;
	}
	.btnConf a span{
		color: #fff;
		font-weight: bold;
		margin-right: 10px;
	}
	.btnConf a.isSelected{
		color: #333;
		background: #ccc;
	}
	.btnConf a.isSelected span{
		color: #000;
	}
	
	#config_panle{
		position: fixed;
		top: 10%;
		right: 20px;
		width: 120px;
	}
	#from_selected{
		position: relative;
		height: 120px;
	}
	#from_selected a{
		display: block;
		position : absolute;
		width: 33%;
		height: 33%;
		text-align: center;
		line-height: 40px;
		font-size: 20px;
		color:#fff;
		background: #888;
	}
	#from_selected a.isSelected{
		background: #333;
		color:#fff;
	}
	.from-top{
		top: 0;
		left: 33%;
	}
	.from-bottom{
		top: 66%;
		left: 33%;
	}
	.from-left{
		top: 33%;
		left: 0;
	}
	.from-right{
		left: 66%;
		top: 33%;
	}
	#from_selected .from-none{
		left: 66%;
		top: 0;
		background:#aaa;
	}
	#from_selected .from-dom{
		top: 33%;
		left: 33%;
		font-size: 30px;
	}
	</style>
</head>
<body>
<div id="wrapper">
	<div class="cpt">
		<h1>响应式用户交互组件库</h1>
		<p>当前为<b>等待响应状态</b><i>正在检测尺寸</i>（分界线640px）</p>
	</div>
	<div class="cnt">
		<div class="demoItem">
			<h3>弹框</h3>
			<div class="btnConf">
				<a href="javascript:void(0)" onclick="toggleParam(this,'title','标题出来了',null)" ><span>√</span>标题</a>
				<a href="javascript:void(0)" onclick="toggleParam(this,'confirm',true,false)"><span>√</span>confirm</a>
			</div>
			<div class="btnList">
				<a href="javascript:void(0)" onclick="showPop(this)">显示</a>
			</div>
		</div>
		<div class="demoItem">
			<h3>浮层</h3>
			<div class="btnList">
				<a href="javascript:void(0)" onclick="showPlane(this)" >屌丝层</a>
				<a href="javascript:void(0)" onclick="showCover(this)" >全屏</a>
			</div>
		</div>
		<div class="demoItem">
			<h3>对话框</h3>
			<div class="btnList">
				<a href="javascript:void(0)" onclick="showConfirm(this)" >确认</a>
				<a href="javascript:void(0)" onclick="showAsk(this)" >询问</a>
			</div>
		</div>
		<div class="demoItem">
			<h3>提示信息</h3>
			<div class="btnList">
				<a href="javascript:void(0)" onclick="showPrompt(this,'我快死了')" >默认（3s关闭）</a>
				<a href="javascript:void(0)" onclick="showPrompt(this,'我快死了',500)" >指定时间（0.5s关闭）</a>
				<a href="javascript:void(0)" onclick="showMessage(this)" >一直显示（别点）</a>
			</div>
		</div>
		<div class="demoItem">
			<h3>选择列表（响应式）</h3>
			<div class="btnList">
				<a href="javascript:void(0)" onclick="showSelect(this)" >侬想组啥？</a>
			</div>
		</div>
	</div>
</div>
<div id="config_panle">
	<div class="btnConf">
		<a href="javascript:void(0)" onclick="toggleParam(this,'mask',true,false)" class="isSelected"><span>√</span>蒙层</a>
		<a href="javascript:void(0)" onclick="toggleParam(this,'easyClose',true,false)" class="isSelected"><span>√</span>easyClose</a>
	</div>
	
	<div id="from_selected">
		<a href="javascript:void(0)" title="上" onclick="toggleFrom(this,'top')" class="from-top isSelected">﹀</a>
		<a href="javascript:void(0)" title="下" onclick="toggleFrom(this,'bottom')" class="from-bottom">︿</a>
		<a href="javascript:void(0)" title="左" onclick="toggleFrom(this,'left')" class="from-left">〉</a>
		<a href="javascript:void(0)" title="右" onclick="toggleFrom(this,'right')" class="from-right">〈</a>
		<a href="javascript:void(0)" title="缩放" onclick="toggleFrom(this,'dom')" class="from-dom">○</a>
		<a href="javascript:void(0)" title="默认" onclick="toggleFrom(this,'none')" class="from-none">×</a>
	</div>
</div>
	<div id="loading_mask">
		<div class="loading_mask_txt">
			正在加载……
		</div>
	</div>
	<script type="text/javascript" src="src/dialog.js"></script>
	<script type="text/javascript">
		var param = {
			'easyClose' : true,
			'mask' : true,
			'from' : 'top'
		};
		function toggleParam(elem,type,value,defaultValue){
			if(param[type]){
				param[type] = defaultValue;
				UI._utils.removeClass(elem,'isSelected');
			}else{
				UI._utils.addClass(elem,'isSelected');
				param[type] = value;
			}
		}
		
		function toggleFrom(elem,from){
			param.from = from;
			if(from == 'none'){
				param.from = null;
			}
			
			UI._utils.each(elem.parentNode.getElementsByTagName('a'),function(i,dom){
				if(UI._utils.hasClass(dom,'from-'+from)){
					UI._utils.addClass(dom,'isSelected');
				}else{
					UI._utils.removeClass(dom,'isSelected');
				}
			});
		}
		
		//弹框
		var active_pop = null;
		function showPop(elem){
			if(active_pop){
				return
			}
			active_pop = UI.pop({
				'title' : param.title,
				'confirm' : param.confirm,
				'width' : 600,
				'easyClose' : param.easyClose,
				'from' : param.from == "dom" ? elem : param.from,
				'mask' : param.mask,
				'html' : '<div style="height:280px;background:url(http://layasset.qiniudn.com/images/cover/newSkin.jpg) no-repeat center"></div>',
				'closeFn' : function(){
					active_pop = null;
				}
			});
		}
		/**
		 * 确认框
		 */
		var active_confirm = null;
		function showConfirm(elem){
			if(active_confirm){
				return;
			}
			active_confirm = UI.confirm({
				'text' : '请我吃饭吧！',
				'btns' : ['好的呀','不愿意'],
				'from' : param.from == "dom" ? elem : param.from,
				'easyClose' : param.easyClose,
				'mask' : param.mask,
				'callback' : function(){
					UI.prompt('你是好人！');
				},
				'closeFn' : function(){
					active_confirm = null;
				}
			});
		}
		
		var active_prompt = null;
		function showMessage(elem){
			if(active_prompt){
				elem.innerHTML = '一直显示（别点）';
				active_prompt.close();
				active_prompt = null;
			}else{
				elem.innerHTML = '想关掉它，点我啊';
				active_prompt = UI.prompt('再点一下按钮，关掉我',0,{
					from : param.from == "dom" ? elem : param.from
				});
			}
		}
		function showPrompt(elem,title,time){
			UI.prompt(title,time,{
				from : param.from == "dom" ? elem : param.from
			});
		}
		var active_select = null;
		function showSelect(elem){
			var offset = UI._utils.offset(elem);
			if(active_select) {
				return
			}
			active_select = UI.select([
				['劈脸呼你',function(){
					UI.prompt('脸好疼');
				}],
				['一刀捅死你',function(){
					UI.prompt('啊，我死了');
				}],
				['滚一边去',function(){
					UI.prompt('滚远了');
				}]
			],{
				'title' : '侬想组啥？',
				'intro' : '来一帮人，想打架么',
				'top' : offset.top + UI._utils.outerHeight(elem),
				'width' : 300,
				'left' : offset.left + 30,
				'from' : param.from == "dom" ? elem : param.from,
				'easyClose' : param.easyClose,
				'mask' : param.mask,
				'closeFn' : function(){
					active_select = null;
				}
			});
		}
		var active_plane = null;
		function showPlane(elem){
			if(active_plane){
				active_plane.close();
				return
			}
			var offset = UI._utils.offset(elem);
			active_plane = UI.plane({
				'width' : UI._utils.outerWidth(elem) - 20,
				'top' : offset.top - 140,
				'left' : offset.left + 10,
				'from' : param.from == "dom" ? elem : param.from,
				'easyClose' : param.easyClose,
				'mask' : param.mask,
				'html' : '<div style="height:150px;line-height:150px;text-align:center;color:#333;background:#fff;box-shadow: 0px 0px 10px #000;">我最可怜，一丁点儿样式都没有</div>',
				'closeFn' : function(){
					active_plane = null;
				}
			});
		}
		
		function showCover(elem){
			var from = param.from == "dom" ? elem : param.from;
			var param1 = {
				'from' : from,
				'mask' : param.mask,
				'easyClose' : param.easyClose,
				'html' : '<table width="100%" height="100%"><tr><td style="text-align:center;vertical-align:middle;"><img src="http://layasset.qiniudn.com/labs/UI.jpg" /></td></tr></table>'
			};
			if(from == 'left'){
				param1.left = 0;
				param1.width = 400;
			}else if(from == 'right'){
				param1.right = 0;
				param1.width = 400;
			}else if(from == 'top'){
				param1.top = 0;
				param1.height = 400;
			}else if(from == 'bottom'){
				param1.bottom = 0;
				param1.height = 400;
			}
			
			UI.cover(param1);
		}
		
		var active_ask = null;			
		function showAsk(elem){
			if(active_ask) {
				return
			}
			active_ask = UI.ask('你今年多大了？',function(year){
				if(year && year == +year){
					if(year > 30){
						UI.prompt('都' + year + '岁了啊，这么老啊！');
					}else if(year > 17){
						UI.prompt(year + '岁呀,干柴烈火的年纪哦！');
					}else{
						UI.prompt('才' + year + '岁啊,回家玩儿去！');
					}
				}else{
					UI.prompt('写个数字会死啊!');
					return false
				}
			},{
				'easyClose' : param.easyClose,
				'from' : param.from == "dom" ? elem : param.from,
				'mask' : param.mask
			});
			active_ask.closeFn = function(){
				active_ask = null;
			};
		}
		
		
		
		
		var bodyDom;
		if (document.compatMode == "BackCompat") {
			bodyDom = document.body;
		}else{
			bodyDom = document.documentElement;
		}
		function countSize(){
			var width = bodyDom.clientWidth;
			var numDom = document.getElementsByTagName('i')[0];
			var deviceDom = document.getElementsByTagName('b')[0];
			numDom.innerHTML = width + 'px';
			if(width > 640){
				deviceDom.innerHTML = 'WEB端';
			}else{
				deviceDom.innerHTML = '手机端';
			}
		}
		UI._utils.ready(function(){
			countSize();
			UI._utils.bind(window,'resize',countSize);
			var loadingDom = document.getElementById('loading_mask');
			setTimeout(function(){
				UI._utils.fadeOut(loadingDom,500);
			},200);
		});
	</script>
</body>
</html>
